<template>
  <el-card :body-style="{ padding: '20px' }">
    <el-button @click="goBack">返回</el-button>
    <h3>{{ survey.title }}</h3>
    <Report :report="report" />
    <el-row>
      <el-col :span="12">
        <el-form label-width="120px">
          <el-form-item label="调查标题">{{ survey.title }}</el-form-item>
          <el-form-item label="金额">{{ survey.amount }}</el-form-item>
          <el-form-item label="数量">{{ survey.quantity }}</el-form-item>
          <el-form-item label="单价">{{ survey.unitPrice }}</el-form-item>
          <el-form-item label="总折扣价">{{ survey.totalDiscountPrice }}</el-form-item>
          <el-form-item label="状态">{{ survey.status === 'ongoing' ? '进行中' : '已结束' }}</el-form-item>
          <el-form-item label="参与人数">{{ survey.participantCount }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form label-width="120px">
          <el-form-item label="创建时间">{{ survey.createTime }}</el-form-item>
          <el-form-item label="结束时间">{{ survey.endTime }}</el-form-item>
          <el-form-item label="条件">{{ survey.condition }}</el-form-item>
          <el-form-item label="内容">{{ survey.content }}</el-form-item>
          <el-form-item label="描述">{{ survey.description }}</el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <CreateQForm :survey-id="route.params.surveyId" />
  </el-card>
</template>

<script setup lang="ts">
import {defineProps, onMounted, reactive, ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import instance from "@/utils/http";
import CreateQForm from "@/components/CreateQForm.vue";
import Report from "@/components/Report.vue";
import {useAuthStore} from "@/stores/auth";

interface Survey {
  surveyId: number;
  amount: number;
  quantity: number;
  unitPrice: number;
  totalDiscountPrice: number;
  title: string;
  condition: string;
  content: string;
  creatorId: number;
  participantCount: number;
  createTime: string;
  endTime: string;
  status: string;
  description: string;
  createType:string
}

const survey = ref<Survey>({
  surveyId: 0,
  amount: 0,
  quantity: 0,
  unitPrice: 0,
  totalDiscountPrice: 0,
  title: '',
  condition: '',
  content: '',
  creatorId: 0,
  participantCount: 0,
  createTime: '',
  endTime: '',
  status: 'ongoing',
  description: '',
  createType:"admin"
});

const report = ref<{
  men:number
  women:number
  areas: {
    name: string
    count: number
  }[]
}>({
  men:0,
  women:0,
  areas:[]
})

const route = useRoute();
const router = useRouter();

const fetchSurvey = async (surveyId: number) => {
  try {
    const response = await instance.get(`/surveys/${surveyId}`);
    survey.value = response.data.data;
    const reportRes = await instance.get(`/surveys/report/${surveyId}`)
    report.value = reportRes.data.data
  } catch (error) {
    console.error('无法加载调查详情');
  }
};

const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  const surveyId = Number(route.params.surveyId);
  fetchSurvey(surveyId);
});
</script>

<style scoped>
.el-card {
  max-width: 1000px;
  margin: 0 auto;
}
</style>
